import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { Card, Image } from 'react-vant'
import { ListItemType } from '../../types'
import { useNavigate } from 'react-router'

const Home:React.FC = () => {
  const navigate = useNavigate()
  const [list, setList] = useState<ListItemType[]>([])
  useEffect(() => {
    axios.get('/api/list').then(res => {
      const { code, data } = res.data
      if(code === 200){
        setList(data)
      }
    })
  }, [])
  // 点击跳转详情页
  const jumpToDetail = (id:string) => {
    navigate(`/detail/${id}`)
  }
  return (
    <div style={{columnCount:'2'}}>
      {
        list.length > 0 && list.map(item => {
          return (
            <Card round style={{ marginBottom: 20 ,border:'1px solid #ccc'}} key={item.id} onClick={() => jumpToDetail(item.id)}>
              <Card.Cover >
                <Image src={item.image[0]} />
              </Card.Cover>
              <Card.Header>{item.title}</Card.Header>
              <Card.Body >
                <p style={{marginBottom: 10}}>{item.descript}</p>
                <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
                  <span>¥：<span style={{color:'#f39',fontWeight:'bold',fontSize:'18px'}}>{item.price}</span></span>
                  <span>库存：{item.totalCount}</span>
                </div>
              </Card.Body>

            </Card>
          )
        })
      }
    </div>
  )
}

export default Home